<!DOCTYPE html>
<html>
<head>
    <title>增强版扫雷</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #ff4d4d; /* 红色背景 */
            font-family: Arial, sans-serif;
        }

        #header {
            display: flex;
            gap: 20px;
            margin: 15px 0;
        }

        .counter {
            padding: 8px 15px;
            background: #333;
            color: white;
            border-radius: 5px;
            font-weight: bold;
        }

        #game {
            display: grid;
            grid-template-columns: repeat(10, 35px); /* 创建10列的网格 */
            gap: 2px; /* 单元格之间的间隙 */
            background: #f7f3d0; /* 浅黄色背景 */
            padding: 3px;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.2);
            border: 2px solid #8c0404; /* 棋盘边框颜色 */
        }

        .cell {
            width: 35px;
            height: 35px;
            background: #ffe9b8; /* 单元格背景颜色 */
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.1s;
            position: relative;
            font-size: 18px;
            border: 1px solid #8c0404; /* 棋盘经纬线颜色 */
        }

        .cell:hover {
            filter: brightness(1.1); /* 鼠标悬停效果 */
        }

        .revealed {
            background: #ffcc00; /* 被揭示的单元格背景颜色 */
        }

        .revealed span {
            position: absolute;
        }

        .mine {
            background: #a8a192 !important; /* 地雷单元格背景颜色 */
        }

        .mine::after {
            content: "😔"; /* 地雷单元格显示的表情符号 */
            font-size: 20px;
            position: absolute;
        }

        .flag::after {
            content: "🐍"; /* 标记旗帜的表情符号 */
            position: absolute;
            font-size: 20px;
            top: 2px;
            left: 4px;
        }

        .number {
            color: red; /* 数字颜色 */
            font-size: 18px;
        }

        #restart {
            margin-top: 20px;
            padding: 10px 25px;
            background: #4CAF50; /* 按钮背景颜色 */
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            transition: background 0.3s;
        }
    </style>
</head>
<body>
    <h2>🌟辛光祝福您新春快乐🐍🌟</h2>
    <h2>🌟标记不开心让我们忘记它们🌟</h2>
    <div id="header">
        <div class="counter">剩余: <span id="flags-left">15</span></div> <!-- 显示剩余旗帜 -->
        <div class="counter">地雷: 8</div> <!-- 显示地雷总数 -->
    </div>
    <div id="game"></div> <!-- 游戏棋盘 -->
    <button id="restart">开始新年</button> <!-- 重启游戏按钮 -->

    <script>
        const SIZE = 10;    // 棋盘大小
        const MINES = 6;   // 地雷总数
        let board = [];
        let gameOver = false;
        let flagsLeft = MINES;

        // 初始化游戏
        function initGame() {
            gameOver = false;
            flagsLeft = MINES;
            updateFlagCounter();
            
            // 创建棋盘数据结构
            board = Array(SIZE).fill().map(() => 
                Array(SIZE).fill().map(() => ({
                    isMine: false, // 是否是地雷
                    revealed: false, // 是否已被揭示
                    flagged: false, // 是否被标记旗帜
                    neighborMines: 0 // 周围地雷数量
                }))
            );

            // 布置地雷
            let minesPlaced = 0;
            while (minesPlaced < MINES) {
                const x = Math.floor(Math.random() * SIZE);
                const y = Math.floor(Math.random() * SIZE);
                if (!board[x][y].isMine) {
                    board[x][y].isMine = true;
                    minesPlaced++;
                }
            }

            // 计算相邻地雷数
            calculateNumbers();
            renderBoard();
        }

        // 计算数字
        function calculateNumbers() {
            for (let x = 0; x < SIZE; x++) {
                for (let y = 0; y < SIZE; y++) {
                    if (!board[x][y].isMine) {
                        board[x][y].neighborMines = countNeighborMines(x, y);
                    }
                }
            }
        }

        // 计算周围地雷数
        function countNeighborMines(x, y) {
            let count = 0;
            for (let dx = -1; dx <= 1; dx++) {
                for (let dy = -1; dy <= 1; dy++) {
                    const nx = x + dx;
                    const ny = y + dy;
                    if (nx >= 0 && nx < SIZE && ny >= 0 && ny < SIZE) {
                        if (board[nx][ny].isMine) count++;
                    }
                }
            }
            return count;
        }

        // 渲染棋盘
        function renderBoard() {
            const game = document.getElementById('game');
            game.innerHTML = '';
            
            board.forEach((row, x) => row.forEach((cell, y) => {
                const element = document.createElement('div');
                element.className = 'cell';
                
                if (cell.revealed) {
                    element.classList.add('revealed');
                    if (cell.isMine) {
                        element.classList.add('mine');
                    } else {
                        if (cell.neighborMines > 0) {
                            element.textContent = cell.neighborMines;
                            element.classList.add('number');
                        } else {
                            const emoji = document.createElement('span');
                            emoji.textContent = '🧧';
                            element.appendChild(emoji);
                        }
                    }
                }
                
                if (cell.flagged) element.classList.add('flag');
                
                element.addEventListener('click', () => handleLeftClick(x, y));
                element.addEventListener('contextmenu', (e) => {
                    e.preventDefault();
                    handleRightClick(x, y);
                });
                
                game.appendChild(element);
            }));
        }

        // 左键点击
        function handleLeftClick(x, y) {
            if (gameOver || board[x][y].flagged) return;
            
            if (board[x][y].isMine) {
                gameOver = true;
                revealAll();
                showMessage('再来一次去掉不开心🤯');
                return;
            }
            
            reveal(x, y);
            checkWin();
        }

        // 右键点击
        function handleRightClick(x, y) {
            if (gameOver || board[x][y].revealed) return;
            
            if (!board[x][y].flagged && flagsLeft <= 0) return;
            
            board[x][y].flagged = !board[x][y].flagged;
            flagsLeft += board[x][y].flagged ? -1 : 1;
            updateFlagCounter();
            renderBoard();
        }

        // 递归揭示单元格
        function reveal(x, y) {
            if (x < 0 || x >= SIZE || y < 0 || y >= SIZE) return;
            if (board[x][y].revealed || board[x][y].flagged) return;
            
            board[x][y].revealed = true;
            
            if (board[x][y].neighborMines === 0) {
                for (let dx = -1; dx <= 1; dx++) {
                    for (let dy = -1; dy <= 1; dy++) {
                        reveal(x + dx, y + dy);
                    }
                }
            }
            
            renderBoard();
        }

        // 显示所有地雷
        function revealAll() {
            board.forEach(row => row.forEach(cell => cell.revealed = true));
            renderBoard();
        }

        // 检查胜利条件
        function checkWin() {
            let allSafeRevealed = true;
            let allMinesFlagged = true;
            
            board.forEach(row => row.forEach(cell => {
                if (!cell.isMine && !cell.revealed) allSafeRevealed = false;
                if (cell.isMine && !cell.flagged) allMinesFlagged = false;
            }));
            
            if (allSafeRevealed || allMinesFlagged) {
                gameOver = true;
                showMessage('恭喜获胜！🎉蛇年快乐🐍');
            }
        }

        // 更新旗帜计数器
        function updateFlagCounter() {
            document.getElementById('flags-left').textContent = flagsLeft;
        }

        // 显示消息
        function showMessage(msg) {
            setTimeout(() => alert(msg), 10);
        }

        // 初始化游戏
        document.getElementById('restart').addEventListener('click', initGame);
        initGame();
    </script>
</body>
</html>
